<template>
  <span class="base-icon" :style="wrapStyle" @click="onClick">
    <svg width="1em" height="1em" fill="currentColor" v-bind="iconStyle">
      <use :xlink:href="`#icon-${name}`"></use>
    </svg>
  </span>
</template>
<script setup lang="ts">
import {CSSProperties} from "vue";
import "./script/iconfont"
import {isNumber} from "@/utils/is";

interface Props {
  /** 设置图标name */
  name: string;
  /** 设置图标大小 默认20px */
  size?: string | number;
  width?: string | number;
  height?: string | number;
  /** 设置图标颜色 默认颜色#479cff */
  color?: string;
  /** 设置图标是否360°持续旋转 */
  isRotate?: boolean;
  disabled?: boolean;
  /** 扩大图标的可点击区域 (单位px) */
  extendedArea?: number;
}

const emit = defineEmits(["click"])
/** 需要按照官网文档设置默认值，否则表现效果和官网文档的不一致 */
const props = withDefaults(defineProps<Props>(), {
  size: 20,
  color: '#479cff'
});
const calcStyle = (val: string | number) => isNumber(val) ? `${val}px` : val;

const wrapStyle = computed(() => ({
  color: props.color ?? "currentColor",
}))
const iconStyle = computed(() => {
  const style: CSSProperties = {}
  if (props.size) {
    Object.assign(style, {
      width: calcStyle(props.size),
      height: calcStyle(props.size),
    })
  }
  if (props.width) {
    Object.assign(style, {width: calcStyle(props.width)})
  }
  if (props.height) {
    Object.assign(style, {height: calcStyle(props.height)})
  }
  return style;
})

function onClick() {
  if (props.disabled) return;
  emit("click");
}
</script>
<style lang="scss">
.base-icon {
  display: inline-flex;
  align-items: center;
}


</style>
